<template>
	<view class="container">
		<swiper class="banner-swiper" circular autoplay :interval="5000" :duration="1000">
			<swiper-item class="banner-swiper-item" v-for="(item, index) in swipers" :key="index">
				<image :src="item.imageUrl" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<!-- section-1 begin -->
			<view class="section-1">
				<view class="item" @click="toClassify(1)">
					<image src="/static/images/tabbar/index/home_icon_tangshi.png" mode="widthFix"></image>
					<view class="wenyue-font">店内堂食</view>
					<view class="text-color-assist">餐品送至您的卡座</view>
				</view>
				<view class="item" @click="toClassify(2)">
					<image src="/static/images/tabbar/index/home_icon_dabao.png" mode="widthFix"></image>
					<view class="wenyue-font">打包带走</view>
					<view class="text-color-assist">可点餐到店自取</view>
				</view>
			</view>
			<!-- section-1 end -->
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				swipers: []
			}
		},
		onLoad() {
			this.getSwiperList()
		},
		methods: {
			...mapMutations(['SET_ORDER_TYPE']),
			getSwiperList () {
				// this.$api.GetAdvertiseList({FCorpID: 93}).then(res=>{
				// 	if(res.status && res.data.length > 0){
				// 		this.swipers = res.data.filter(im=>im.imageUrl)
				// 	}
				// })
				this.$api.GetDesignPageData({pageCode: "mobile_food"}).then(res=>{
					consoloe.log("pageData", res)
				})
			},
			toClassify(type){
				this.SET_ORDER_TYPE(type)
				uni.$u.route({
					type: 'tab',
					url: '/pages/tab_bar/classify/classify'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		max-height: 100%;
	}
	.banner-swiper {
		width: 100%;
		height: 550rpx;
		.banner-swiper-item {
			image {
				width: 100%;
			}
		}
	}
	.content {
		width: 100%;
		padding: 0 30rpx;
		position: relative;
	}
	.section-1 {
		position: relative;
		background-color: #fff;
		margin-top: -60rpx;
		border-radius: 10rpx;
		padding: 60rpx 0;
		display: flex;
		margin-bottom: 30rpx;
		box-shadow:0 20rpx 20rpx -20rpx rgba($color: #333, $alpha: 0.1);;
		.item {
			flex: 1;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			&:nth-child(1):after {
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 2rpx;
				height: 100rpx;
				background-color: #c8c7cc;
			}
			image {
				width: 138rpx;
				height: 138rpx;
				margin-bottom: 20rpx;
			}
			.wenyue-font {
				font-size: 36rpx;
				margin-bottom: 10rpx;
			}	
		}
	}
	
</style>
